<template>
  <div>
    <van-nav-bar title="评论" left-text="返回" left-arrow @click="onClickLeft" />
    <div class="comment-app">
      <!-- 评论列表容器 -->
      <div class="comment-list-container">
        <!-- 单个评论项 -->
        <div v-for="(comment, index) in comments" :key="index" class="comment-item">
          <p>{{ comment }}</p>
          <!-- 添加删除按钮 -->
          <button @click="deleteComment(index)">删除评论</button>
        </div>
      </div>
      <!-- 评论输入框 -->
      <div class="comment-input-container">
        <input type="text" v-model="newComment" placeholder="输入评论内容" />
        <button @click="addComment">发表评论</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const onClickLeft = () => history.back()
import { ref } from 'vue'
// 存储所有评论的数组
const comments = ref([])
// 存储新评论内容的响应式变量
const newComment = ref('')
// 添加评论的方法
const addComment = () => {
  if (newComment.value.trim() !== '') {
    // 将新评论添加到评论数组的开头
    comments.value.unshift(newComment.value)
    // 清空当前评论输入框内容
    newComment.value = ''
  }
}
// 删除评论的方法
const deleteComment = (index: number) => {
  comments.value.splice(index, 1)
}
</script>
<style scoped lang="scss">
.comment-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.comment-list-container {
  width: 100%;
  max-width: 600px;
  margin-bottom: 20px;
}

.comment-item {
  background-color: #f5f5f5;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}

.comment-input-container {
  width: 100%;
  max-width: 600px;
}

input[type='text'] {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}
</style>
